<template>
  <view class="login-page">
    <nav-bar title="邮箱登录" textAlign="center"></nav-bar>
    <view class="form-container">

      <view class="input-container">
        <input type="text" placeholder="请输入邮箱" placeholder-style="color:#999" v-model="formData.email">
      </view>

      <view class="input-container">
        <input type="password" placeholder="请输入密码" placeholder-style="color:#999" v-model="formData.password">
      </view>

      <view class="input-container captcha" v-if="captchaSrc">
        <input type="text" placeholder="请输入验证码" placeholder-style="color:#999" v-model="formData.captcha">
        <image class="captcha" type="image" :src="captchaSrc" alt="" @click="handleRefreshCaptcha">
      </view>

      <view class="prompt">
        <view>
          <navigator url="/pages/account/password">
            <text>找回密码</text>
          </navigator>
        </view>
        <view>
          <navigator url="/pages/account/register">
            <text>立即注册</text>
          </navigator>
        </view>
      </view>

      <view class="submit">
        <view class="btn" @click="handleSubmit">
          <text>登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    login
  } from "@/api/account/account.js"
  import {
    HOST_URL
  } from "@/api/index.js";
  let emailPattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
  export default {
    data() {
      return {
        formData: {
          email: '',
          password: ''
        },
        t: 0
      };
    },
    computed: {
      captchaSrc() {
        if (emailPattern.test(this.formData.email)) {
          return HOST_URL + '/account/captcha?email=' + this.formData.email + '&t=' + this.t
        } else {
          return false;
        }
      }
    },
    methods: {
      handleRefreshCaptcha() {
        this.t = Math.random() * 1000
      },
      async handleSubmit() {
        // 检验表单
        if (!emailPattern.test(this.formData.email)) {
          uni.showToast({
            title: "请输入邮箱",
            icon: "none"
          })
        }
        if (!this.formData.password) {
          uni.showToast({
            title: "请正确填写密码",
            icon: 'none'
          })
          return;
        }

        // 登录
        const {
          data: res
        } = await login(this.formData);
        console.log("login");
        if (res.success) {
          let data = res.data.user;
          getApp().globalData.setUser(data);
          uni.showToast({
            title: "登录成功",
            icon: 'none'
          })
          getApp().globalData.handleLogin(() => {
            uni.switchTab({
              url: '/pages/my/my'
            })
          });

        } else {
          this.handleRefreshCaptcha();
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      }
    }

  }
</script>

<style lang="scss" scoped>
  .login-page {
    width: 100%;
    height: 100vh;
    background-color: #fff;

    .form-container {
      padding: 8px 16px;

      .input-container {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        margin-top: 16px;

        input {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          padding-right: 24px;
          padding-left: 8px;
          z-index: 0;
        }

        .message {
          width: 120px;
          height: 100%;
          line-height: 40px;
          text-align: right;
          font-size: 14px;
        }

      }

      .input-container:focus-within {
        border-color: #3FD3D1;
      }

      .captcha {
        display: flex;
        align-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;

        input {
          margin-right: 10px;
        }

        .captcha {
          width: 98px;
          height: 32px;
          flex-shrink: 0;
          border-radius: 8px;
          text-align: center;
          line-height: 32px;
          font-size: 12px;
          color: #fff;
        }
      }


      .prompt {
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: #9E9E9E;
        font-size: 12px;
        padding: 16px 0;
      }

      .submit {
        .btn {
          width: 100%;
          height: 48px;
          border-radius: 4px;
          opacity: 1;
          background: #3FD3D1;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
        }
      }
    }
  }
</style>